import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { NzInputModule } from 'ng-zorro-antd/input';

@Component({
  selector: 'app-input-pwd',
  standalone: true,
  imports: [NzInputModule, FormsModule, NzIconModule],
  template: `
    <div class="demo">
      <nz-input-group [nzSuffix]="pwdVisibleToggle"
        ><input
          nz-input
          placeholder="密码"
          [(ngModel)]="password"
          [type]="passwordVisible ? 'text' : 'password'"
      /></nz-input-group>

      <ng-template #pwdVisibleToggle>
        <span
          nz-icon
          [nzType]="passwordVisible ? 'eye-invisible' : 'eye'"
          (click)="passwordVisible = !passwordVisible"
        ></span>
      </ng-template>
    </div>
  `,
  styles: ``,
})
export class InputPwdComponent {
  password = '';
  passwordVisible = false;
}
